<template>
  <div class="download-manage-content-wrapper">
    <div
      v-if="activeMenu === '2'"
      class="download-manage-content-top bg-color"
    >
      <div
        class="download-dialog-text"
      >
        <span>共完成传输</span>
        <span class="text_red">{{ finishList.length }}</span>
        <span>个文件</span>
      </div>
      <div
        class="download-dialog-delete-group"
        :style="`cursor:${currentList.length?'pointer':'not-allowed'};opacity:${currentList.length?1:'.7'}`"
        @click="deleteAllFinishTableList"
      >
        <svg-icon
          icon-class="download-content-delete"
          :size="20"
        />
        <span>清除所有记录</span>
      </div>
    </div>
    <div
      v-if="activeMenu === '1'"
      class="download-manage-content-top"
    >
      <div class="download-dialog-btn-group">
        <div
          v-for="item in btnList"
          :key="item.title"
        >
          <el-button
            type="primary"
            :color="item.background"
            :style="`color: #192655; width: 100px; height: 38px;border: none;opacity:${currentList.length?1:'.7'};cursor:${currentList.length?'pointer':'not-allowed'}`"
            @click="item.click"
          >
            <svg-icon
              :icon-class="item.icon"
              :style="`color:${item.iconColor}`"
              :size="20"
            />
            <span>{{ item.title }}</span>
          </el-button>
        </div>
      </div>
      <div class="download-dialog-text">
        <span>正在下载</span>
        <span class="text_red">{{ downingList.length }}</span>
        <span>个文件</span>
      </div>
    </div>
    <div class="download-dialog-list-wrapper">
      <div
        v-for="item in currentList"
        :key="item.id"
        class="download-dialog-list-item"
      >
        <div class="download-lighting-icon">
          <img
            :src="item.icon"
            class="table-img"
          >
        </div>
        <div class="download-lighting-title-wrapper title">
          <div
            class="download-lighting-title"
            :title="getShowTitle(item.title)"
          >
            {{ getShowTitle(item.title) }}
          </div>
          <div 
            v-if="activeMenu === '1'"
            class="download-lighting-title"
            :title="item.currentSizeStr+'/'+item.allSizeStr"
          >
            {{ item.currentSizeStr }}/{{ item.allSizeStr }}
          </div>
          <div 
            v-if="activeMenu === '2'"
            class="download-lighting-title"
            :title="item.allSizeStr"
          >
            {{ item.allSizeStr }}
          </div>
        </div>
        <div class="download-lighting-time">
          <!-- <span>&nbsp;</span> -->
          <span v-if="activeMenu === '1'">剩余时间：{{ item.needTimeStr }}</span>
          <span v-if="activeMenu === '2'">{{ item.endTime }}</span>
        </div>
        <div
          v-if="activeMenu === '1'"
        >
          <div  
            v-if="!isMember"
            class="download-lighting-btn"
            @click="openMemberDialog"
          >
            <svg-icon
              icon-class="download-content-lighting"
              style="color: #ffcc49"
              :size="20"
            />
            <span>立即提速</span>
          </div>
          <div
            v-else
            class="download-member-text"
          >
            会员极速下载中
          </div>
        </div>
        <div
          v-if="activeMenu === '1'"
          class="download-list-progress"
        >
          <el-progress
            :percentage="item.percent"
            :status="isMember?'warning':''"
            :show-text="false"
          />
        </div>
        <div class="download-list-status">
          <span v-if="item.status === '0'">等待下载</span>
          <span v-if="item.status === '1'">{{ item.downloadSpeedStr }}/S</span>
          <span v-if="item.status === '5'">正在建立链接</span>
          <!-- <span v-if="item.status === '6'">正在建立链接</span> -->
          <span v-if="item.status === '4'">已暂停</span>
          <svg-icon
            v-if="item.status === '2'"
            :size="20"
            icon-class="download-content-success"
            style="color:#1FC880"
          />
          <span v-if="item.status === '2'">下载完成</span>
          <span
            v-if="item.status === '3'"
            :title="item.errorMsg"
          >下载失败</span>
        </div>
        <div
          class="download-finish-cell-black"
        />
        <div class="download-list-operate">
          <div
            v-for="item1 in tableItemOperateList.filter((item2) => item2.show(item))"
            :key="item1.title(item)"
            :title="item1.title(item)"
            class="download-list-operate-item"
            style="color:#192655;"
            @click="item1.click(item)"
          >
            <svg-icon
              :icon-class="item1.icon"
              :size="20"
            />
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="currentList.length===0"
      class="download-empty"
    >
      <svg-icon
        :size="66"
        icon-class="download-content-empty"
      />
      <div v-if="activeMenu==='1'">
        当前没有下载任务
      </div>
      <div v-if="activeMenu==='2'">
        当前没有下载记录
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import useDialogPromiseHook from '@/hooks/use-dialog-promise-hook'
import { useDownloadManageMenu } from '@/stores/download-manage-menu'
import { useDownloadManage1 } from '@/stores/download-manage1'
import { storeToRefs } from 'pinia'
import { invokeAsyncAPi } from '@/utils/xz-fn'
import { useDownloadManageWindow } from '@/stores/download-manage-window'
import {useUserInfo1} from '@/stores/user-info1'

const dialog = useDialogPromiseHook()

const downloadManageMenuStore = useDownloadManageMenu()
const { activeMenu } = storeToRefs(downloadManageMenuStore)

const userInfoStore = useUserInfo1();
  const { isMember } = storeToRefs(userInfoStore)

const downloadManageStore = useDownloadManage1()
const { downingList, finishList } = storeToRefs(downloadManageStore)

const downloadManageWindowStore = useDownloadManageWindow()
const { masterWindowId } = storeToRefs(downloadManageWindowStore)

const currentList = computed(() => {
  if(activeMenu.value==='1'){
    return downingList.value
  } else if (activeMenu.value === '2') {
    return finishList.value;
  }
  return [];
})
const getShowTitle = computed(() => {
  return (title) => {
    return title.slice(0,title.lastIndexOf('.'))
  }
})
const btnList = [
  {
    title: '全部暂停',
    icon: 'download-content-pause',
    background: 'rgba(30,140,255,0.2)',
    iconColor: '#192655',
    click: () => {
      if(!currentList.value.length){
        return;
      }
      invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'stop-all-downing-table-list')
    }
  },
  {
    title: '全部运行',
    icon: 'download-content-pay',
    background: 'rgba(110,255,97,0.2)',
    iconColor: '#192655',
    click: () => {
      if(!currentList.value.length){
        return;
      }
      invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'run-all-downing-table-list')
    }
  },
  {
    title: '全部删除',
    icon: 'download-content-stop',
    background: 'rgba(208,61,14,0.1)',
    iconColor: '#E00000',
    click: () => {
      if(!currentList.value.length){
        return;
      }
      dialog.showDialog('dialogSimple', {
        content: '确定要删除全部下载任务吗？',
        buttonList: [
          {
            text: '确定',
            click: 'success',
            type: 'primary'
          },
          {
            text: '取消',
            click: 'cancel',
            type: 'default'
          }
        ]
      })
        .then(() => {
         invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'delete-all-downing-table-list')
      })
      .catch(() => {})
      
    }
  }
]

const tableItemOperateList = [
  {
    icon: 'download-content-folder',
    title: (item: any) => '打开所在文件夹',
    show: (item: any) => item.status === '2' && activeMenu.value === '2',
    click: (item: any) => {
      // 判断文件是否存在
      invokeAsyncAPi('fq_PathFileExists', item.downloadFullPath).then((res: any)=>{
        // res 返回1代表文件还在   res 返回0代表文件被删除了
        if(res){
          invokeAsyncAPi('fq_OpenFolderAndSelectFile', item.downloadFullPath)
        }else {
        dialog.showDialog('dialogSimple', {
        content: `该文件已被删除！`,
        buttonList: [
          {
            text: '确定',
            click: 'success',
            type: 'primary'
          },
          // {
          //   text: '取消',
          //   click: 'cancel',
          //   type: 'default'
          // }
        ]
      })
        .then(() => {
      })
      .catch(() => {})
        }
      })
      
    }
  },
  {
    icon: 'download-content-pay',
    title: (item: any) => {
      if (item.status === '4') {
        //暂停下载
        return '恢复下载'
      } else if (item.status === '3') {
        //下载失败
        return '重新下载'
      }
    },
    show: (item: any) => ['3', '4'].includes(item.status) && activeMenu.value === '1',
    click: (item: any) => {
      invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'start-downing-table-list', {
        id: item.id
      })
      // instance.startOne(item.id);
    }
  },
  {
    icon: 'download-content-pause',
    title: (item: any) => '暂停下载',
    show: (item: any) => !['3', '4'].includes(item.status) && activeMenu.value === '1',
    click: (item: any) => {
      invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'stop-downing-table-list', {
        id: item.id
      })
      // instance.pauseOne(item.id);
    }
  },
  {
    icon: 'download-content-delete',
    title: (item: any) => {
      if (activeMenu.value === '1') {
        return '删除'
      } else if (activeMenu.value === '2') {
        return '删除记录'
      }
    },
    show: () => true,
    click: (item: any) => {
      dialog.showDialog('dialogSimple', {
        content: `确定要删除${activeMenu.value==='1'?'任务':'记录'}吗？`,
        buttonList: [
          {
            text: '确定',
            click: 'success',
            type: 'primary'
          },
          {
            text: '取消',
            click: 'cancel',
            type: 'default'
          }
        ]
      })
        .then(() => {
          if (activeMenu.value === '1') {
            invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'delete-downing-table-list', {
              id: item.id
            })
          } else if (activeMenu.value === '2') {
            invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'delete-down-finish-table-list', {
              id: item.id
            })
          }
      })
      .catch(() => {})
      
    }
  }
]

const deleteAllFinishTableList = () => {//清除所有完成的list
  if (!finishList.value.length) {
    return;
  }
  dialog.showDialog('dialogSimple', {
    content: '确定要清空所有下载记录吗？',
    buttonList: [
      {
        text: '确定',
        click: 'success',
        type: 'primary'
      },
      {
        text: '取消',
        click: 'cancel',
        type: 'default'
      }
    ]
  }).then(() => {
      invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'delete-all-finish-download-table-list')
  }).catch(() => {})
  
}

const openMemberDialog = () => {
 

  if (isMember.value) {
    return;
  }
  invokeAsyncAPi('fq_ShowUserCenter')
}
</script>

<style scoped lang="scss">
.download-manage-content-wrapper {
  font-size: 12px;
  position: absolute;
  top: 46px;
  right: 14px;
  bottom: 20px;
  left: 154px;

  .download-empty{
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    display: flex;
    width:100px;
    height:100px;
    flex-direction: column;
    gap:10px;
    color:#bbb;
    align-items: center;
  }

  .download-dialog-list-wrapper {
    height: calc(100% - 46px);
    overflow: auto;

  

    .download-finish-cell-black{
      flex-grow: 1;
    }
    .download-lighting-icon{
      margin-left:16px;
      .table-img{
        width:30px;
        height:30px;
        object-fit: contain;
      }
    }

    .download-lighting-title-wrapper,
    .download-lighting-time {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 12px;
      color: #192655;
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 140px;
      flex-shrink: 0;
    }
    .download-lighting-title-wrapper.title{
      width:120px;
    }
    .download-lighting-title-wrapper.title{
      max-width:100%;
    }
    
   
    .download-lighting-title{
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .download-dialog-list-item {
      display: flex;
      height: 60px;
      border-radius: 6px;
      align-items: center;
      justify-content: space-around;
      gap:10px;
      &:hover{
        background: rgba(30, 140, 255, 0.08);
      }

      .download-lighting-btn {
        width: 106px;
        height: 30px;
        background: #1e8cff;
        border-radius: 22px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 30px;
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-grow: 0;
        // margin:0 10px;
      }

      .download-member-text{
        width: 106px;
        color: #7B4801;
        font-size: 12px;
        width: 106px;
      }

      .download-list-status {
        width: 100px;
        text-align: center;
        display: flex;
        align-items: center;
        gap:2px;
        line-height: 20px;
        margin-left:10px;
      }

      .download-list-progress {
        width: 100px;
      }

      .download-list-operate {
        width: 60px;
        margin-right:16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        .download-list-operate-item{
          user-select: none;
          opacity: 1;
          &:hover{
            opacity: .7;
          }
        }
      }

      // &:first-child,
      // &:hover {
      //   .download-lighting-btn {
      //     opacity: 1;
      //   }
        
      // }
    }
  }

  .download-manage-content-top {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    margin-bottom: 8px;

    &.bg-color {
      background: rgba(25, 38, 85, 0.05);
      border-radius: 4px;
      padding:0 10px;
    }

    .download-dialog-btn-group {
      display: flex;
      gap: 16px;
    }

    .download-dialog-text {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 12px;
      color: #192655;

      .text_red {
        color: #e00000;
        font-weight: bold;
        padding: 0 2px;
        display: inline-block;
      }
    }

    .download-dialog-delete-group {
      display: flex;
      align-items: center;
      gap: 3px;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>
